import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { ApplicationService } from "../../../service/application.service";
import { Router, NavigationEnd } from '@angular/router';
@Component({
  selector: 'app-navigation-background',
  templateUrl: './navigation-background.component.html',
  styleUrls: ['./navigation-background.component.css']
})
export class NavigationBackgroundComponent implements OnInit {
  @ViewChild('qu')
  qu: ElementRef;
  showBg: boolean = false;
  constructor(
    private application: ApplicationService,
    private renderer: Renderer2,
    private router: Router
  ) { }

  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)  // 筛选原始的Observable：this.router.events
      .subscribe((event: NavigationEnd) => {
        if (event.url.indexOf("main") > -1) {
          this.showBg = true;
        } else {
          this.showBg = false;
        }
      });
    if (window.location.href.indexOf("main") > -1) {
      this.showBg = true;
    };
    let mapUrl = "url(" + "./assets/images/" + this.application.appConfigData.appCompany + ".png" + ") no-repeat center";
    this.renderer.setStyle(this.qu.nativeElement, "background", mapUrl);
    this.renderer.setStyle(this.qu.nativeElement, "background-size", 'auto 100%');
    if (this.application.currentApplicationParams && this.application.currentApplicationParams['bgPosition']) {
      const bgPosition = this.application.currentApplicationParams['bgPosition'].paramValue;
      let bgPositionSplit = bgPosition.split(';');
      if (bgPositionSplit.length <= 1) {
        bgPositionSplit = bgPosition.split('；');
      }
      this.renderer.setStyle(this.qu.nativeElement, "top", bgPositionSplit[0] + '%');
      this.renderer.setStyle(this.qu.nativeElement, "left", bgPositionSplit[1] + '%');
      this.renderer.setStyle(this.qu.nativeElement, "transform", `scale(${bgPositionSplit[2]})`);

    }
  };
}



// WEBPACK FOOTER //
// ./src/app/module/navigation/navigation-background/navigation-background.component.ts